<template>
	<view>
		<view class="step-box" v-for="(item,index) in stepList" :key="index">
			<view class="fx-center step-title">
				<view class="line2" :class=" getNowIndex === '' ? '' : index>getNowIndex?'grey-color':''"></view>
				<view class="left-box">
					<view class="step-icon fx-center-center">
						<view class="circle circle1" v-if="getNowIndex !== '' && index>getNowIndex"></view>
						<view class="circle" v-else></view>
					</view>

				</view>
				<view class="main-basic-name">{{item.chapter_name}}</view>
			</view>
			<view style="position: relative;" v-for="(it,i) in item.lessons" :key="i">
				<template v-if="index!==stepList.length-1 ||  (index===stepList.length-1 && i!==item.lessons.length-1)">
					<view class="line" :style="i=== item.lessons.length-1 ? 'height: 66%;' : ''"
						v-if="getNowIndex===''">
					</view>
					<view class="line" :style="i=== item.lessons.length-1 ? 'height: 66%;' : ''"
						:class="(index>getNowIndex || (index===getNowIndex && i>=getNowStep))?'grey-color':''" v-else>
					</view>
				</template>
				<view class="fx-center product-box">
					<view class="left-box">
						<image src="/static/ok.png" mode="heightFix" class="step-icon" v-if="it.state==2"></image>
						<image src="/static/wait.png" mode="heightFix" class="step-icon"
							v-else-if="index===getNowIndex && i===getNowStep">
						</image>
						<view class="step-icon-view" v-else></view>
					</view>

					<view class="fx-center-between product-item">
						<view class="">
							<view class="product-name">{{it.name}}</view>
							<view class="">学习并通过考核后才能进入下一课程</view>
						</view>
						<van-button color="#4078E5" size="small" v-if="index===getNowIndex && i===getNowStep"
							@click="toLearnVideo(it.id,index,i)">去学习</van-button>
						<van-button color="#F1F3F6" size="small" custom-style="color:#8A8F99" @click="toLearn(it.state)"
							v-else>{{(it.state == 2) ? '已完成' : '去学习'}}</van-button>
						<!--state 0-未开始，1-学习中，2-已完成 -->
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "c-step",
		props: {
			// 课程列表
			stepList: {
				typeof: Array,
				default: () => []
			},
			// 项目id
			pid: {
				typeof: Number || String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		computed: {
			getNowIndex() {
				let now = ''
				for (let i = 0; i < this.stepList.length; i++) {
					for (let j = 0; j < this.stepList[i].lessons.length; j++) {
						if (this.stepList[i].lessons[j].state === 1 || this.stepList[i].lessons[j].state === 0) {
							now = i
							break;
						}
					}
					if (now !== '') {
						break;
					}
				}
				console.log('111', now)
				return now
			},
			getNowStep() {
				let now = ''
				for (let i = 0; i < this.stepList.length; i++) {
					for (let j = 0; j < this.stepList[i].lessons.length; j++) {
						if (this.stepList[i].lessons[j].state === 1 || this.stepList[i].lessons[j].state === 0) {
							now = j
							break;
						}
					}
					if (now !== '') {
						break;
					}
				}
				console.log('222', now)
				return now
			}
		},
		methods: {
			toLearn(state) {
				if (state === 0) {
					this.$api.showError('请先完成上一小节，完成后可解锁本小节!')
				}
			},
			toLearnVideo(id, index, i) {
				// 判断是否为最后一次练题
				let isLast = false
				if (index === this.stepList.length - 1 && i === this.stepList[index].lessons.length - 1) {
					isLast = true
				}
				uni.navigateTo({
					url: '/pages/workbench/trainCourse/videoLearn/videoLearn?pid=' + this.pid + '&id=' + id +
						'&isLast=' + isLast
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.step-box {
		position: relative;
		margin-bottom: 24rpx;
		margin-top: 40rpx;

		.step-title {
			margin-bottom: 32rpx;
			position: relative;

			.circle {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #4078E5;
			}

			.circle1 {
				background-color: #BEBFC2;
			}

			.line2 {
				position: absolute;
				border: 2rpx dashed #4078E5;
				height: 210%;
				top: 80%;
				left: 1.9%;
			}
		}

		.line {
			position: absolute;
			border: 2rpx dashed #4078E5;
			// height: 84rpx;
			height: 88%;
			left: 14rpx;
			top: 63%;
			left: 1.9%;
		}


		.left-box {
			width: 56rpx;
			flex-shrink: 0;
		}

		.step-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.step-icon-view {
			width: 32rpx;
			height: 32rpx;
			background: #F1F3F6;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			border: 3rpx solid #BEBFC2;
			box-sizing: border-box;
		}

		.product-box {
			margin-bottom: 24rpx;

			.product-item {
				background-color: #fff;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				padding: 32rpx;
				font-size: 26rpx;
				color: #8A8F99;
				flex: 1;

				.product-name {
					font-size: 32rpx;
					color: #161616;
					margin-bottom: 12rpx;
				}
			}
		}
	}

	.grey-color {
		border: 2rpx dashed #BEBFC2 !important;
	}

	.step-box:first-child {
		margin-top: 0;
	}
</style>